<template>
  <div class="cart-control" @click.stop.prevent>
    <a href="javascript:;" v-if="goodsNum>0" @click.stop.prevent="removeCart()">
      <icon symbol="min"></icon>
    </a>
    <span v-if="goodsNum>0">{{goodsNum}}</span>
    <a href="javascript:;"  v-if="!goods.haveSp" @click.stop.prevent="addSingleCart($event)">
      <icon symbol="add"></icon>
    </a>
    <a href="javascript:;" class="a-choose" v-if="goods.haveSp" @click.stop.prevent="chooseSpec(goods.goSn)">选规格</a>
  </div>
</template>

<script lang="babel">
  import Icon from '@components/icon'
  import {mapGetters} from 'vuex'
  export default {
    components: {
      Icon
    },
    props: ['goods','shop'],
    computed: {
      ...mapGetters({
        getCart: 'frontend/cart/getCart'
      }),
      goodsNum() {
        let _this = this;
        let shopId = this.shop;
        let initNum = 0
        if (this.getCart[shopId]) {
          let goodsFilter = this.getCart[shopId].goods.filter((item) => {
            return item.goSn === _this.goods.goSn
          })
          goodsFilter.forEach((item)=>{
            initNum += item.goNum
          })
        }
        return initNum;
      }
    },
    mounted () {
    },
    methods: {
      addSingleCart(event) {
        this.$root.eventHub.$emit('cart.add', event.target);
        this.$store.dispatch('frontend/cart/addCart', this.goods);
      },
      chooseSpec(goodsId) {
        this.$store.dispatch('backend/shop/modal', true)
        this.$store.dispatch('backend/shop/getGoods', goodsId)
      },
      removeCart() {
        if (this.goods.haveSp) {
          this.$store.dispatch('global/toast', '请在购物车里删除');
        } else {
          this.$store.dispatch('frontend/cart/removeCart', this.goods);
        }
      }
    }
  }
</script>
<style lang="less" rel="stylesheet/less">
  .cart-control{
    display: flex;
    align-items: center;
  a{
    display: block;
  }
  span{
    width: 50/75rem;
    text-align: center;
    font-size: 28/75rem;
    color: #333;
  }
  .a-choose{
    background-color: #fb9f20;
    color: #fff;
    line-height: 1;
    padding: 8/75rem ;
    font-size: 26/75rem;
    border-radius: 10/75rem;
  &:active{
     background-color: lighten(#fb9f20, 10%);
   }
  }
  svg{
    display: block;
    width: 45/75rem;
    height: 45/75rem;
  }
  }
</style>